<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>CheckBox Tree with Dijit ToogleButton </title>     
<!--
  This demo uses the dijit ToggleButton instead of the default cbtree multi-state
  checkbox.
-->
     <style type="text/css">
      @import "../../dijit/themes/claro/claro.css";
      @import "../../dijit/themes/claro/document.css";
      @import "../../dijit/tests/css/dijitTests.css";
      @import "../themes/claro/claro.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: false,
            baseUrl: "../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>
    <script type="text/javascript" src="../../dojo/dojo.js"></script> 
    <script type="text/javascript">
      require([
        "dojo/ready",
        "dojo/data/ItemFileWriteStore",
        "dijit/form/ToggleButton",
        "cbtree/Tree",                      // CheckBox Tree              
        "cbtree/TreeStyling",               // CheckBox TreeStyling              
        "cbtree/models/ForestStoreModel"    // Tree Forest Store Model
        ], function( ready, ItemFileWriteStore, ToggleButton, Tree, TreeStyling, ForestStoreModel ) {

          var store = new ItemFileWriteStore( { url: "../datastore/Simpsons.json" });
          var model = new ForestStoreModel( {
                              store: store,
                              query: {type: 'parent'},
                              rootLabel: 'The Simpsons',
                              checkedRoot: true
                              }); 

          ready( function() {
            var tree = new Tree( {  model: model,
                                    id: "MyTree",
                                    widget: { type: ToggleButton, 
                                              args:{iconClass:'dijitCheckBoxIcon'}, 
                                              mixin: function(args) {
                                                        args['label'] = this.label;
                                                      }
                                            }
                                    }, "CheckboxTree" );
            tree.startup();
            // Hide Labels and Icons for the entire tree.
            tree.set("labelStyle", {display:'none'});
            tree.set("iconStyle", {display:'none'});
          });
        }
      );
    </script>
  </head>
    
  <body class="claro">
    <h1>Dijit CheckBox Tree - Mixin Widget: &lt;ToggleButton&gt;</h1>
    <div id="CheckboxTree">  
    </div>
  </body> 
</html>